/**
 * 弹出窗口主界面组件
 * iOS风格设计，简化为仅显示简洁标题和按钮
 */
import { useState } from 'react';
import './App.css';

function App() {
  const [loading, setLoading] = useState<boolean>(false);
  const [message, setMessage] = useState<string>('');

  /**
   * 在页面上打开导航链接面板
   */
  const openPanelInPage = async () => {
    setLoading(true);
    setMessage('正在打开...');
    
    try {
      // 获取当前标签页
      const tabs = await browser.tabs.query({ active: true, currentWindow: true });
      if (tabs[0] && tabs[0].id) {
        // 向内容脚本发送消息
        const response = await browser.tabs.sendMessage(tabs[0].id, { action: 'openPanel' });
        
        if (response && response.success) {
          // 成功打开panel后立即关闭popup
          window.close();
        } else {
          setMessage('无法显示面板');
          setLoading(false);
        }
      }
    } catch (error) {
      console.error('打开面板失败:', error);
      setMessage('操作失败');
      setLoading(false);
    }
  };

  return (
    <div className="popup-container">
      <div className="plugin-info">
        <h1>网页导航链接提取器</h1>
        <p className="description">自动提取导航链接，支持一键获取和选区采集</p>
      </div>
      
      {message && <div className="message">{message}</div>}
      
      <div className="action-container">
        <button 
          className="main-button" 
          onClick={openPanelInPage} 
          disabled={loading}
        >
          {loading ? '处理中...' : '在页面中打开'}
        </button>
      </div>
      
      <div className="footer">
        <p>v1.0.0</p>
      </div>
    </div>
  );
}

export default App;
